<template>
  <div class="x-slider" :style="{ top: top, right: right }">
    <div class="slider-all">
      <!-- <x-slider-item
        @handleClick="handleOpen"
        :isActive="isOpen"
        :url="allIcon.url"
        :checkedUrl="allIcon.checkedUrl"
      />-->
      <div class="silder-item" :class="{ 'item-h': isOpen }">
        <x-slider-item
          v-for="(item, index) in slider"
          @handleClick="handleItem(item.id)"
          :key="index"
          :isBottom="index != slider.length - 1"
          :isActive="currentItem == item.id"
          :url="item.url"
          :name="item.name"
          :checkedUrl="item.checkedUrl"
        />
      </div>
    </div>
    <!-- <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      class="jk-dialog"
      style="margin-top:5vh"
    >
      <div id="h5videobox">
        <video
          style="height:800px"
          class="h5video"
          id="h5sVideo1"
          autoplay
          webkit-playsinline
          playsinline
        ></video>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import XSliderItem from "@/components/xslideritem";
import { mapActions } from "vuex";
import jkData from "./data.json";

let jkLayer;

export default {
  name: "xsilder",
   props: {
    top: {
      type: String,
      default: "15%"
    },
    right: {
      type: String,
      default: "580px"
    },
    list:{
      type:Array,
      default:[]
    }
  },
  data(){
    return {
      isOpen: true,
      currentItem: 0,
      sliders: [
        {
          url: require("@/assets/images/slidericon/mj.png"),
          checkedUrl: require("@/assets/images/slidericon/mjSelect.png"),
          name: "人脸门禁",
          id:0
        },
        {
          url: require("@/assets/images/slidericon/face.png"),
          checkedUrl: require("@/assets/images/slidericon/faceSelect.png"),
          name: "人脸抓拍",
          id:1
        },
        {
          url: require("@/assets/images/slidericon/car.png"),
          checkedUrl: require("@/assets/images/slidericon/carSelect.png"),
          name: "车辆抓拍",
          id:2
        },
        {
          url: require("@/assets/images/slidericon/wifi.png"),
          checkedUrl: require("@/assets/images/slidericon/wifiSelect.png"),
          name: "自助采集",
          id:3
        }
      ],
      slider:[]
    };
  },

  components: {
    XSliderItem
  },
  watch:{
    'list':function(){
     this.$nextTick(() => {
       this.getData()
    })
    }
  },
  mounted() {
    // this.currentItem = this.sliders.length - 1;

   this.getData()

  },
  methods: {
    ...mapActions(["GetSliderItemAction"]),
    //打开菜单
    handleOpen() {
      this.isOpen = !this.isOpen;
    },
    getData(){
       this.currentItem=this.list[0].id;
    this["GetSliderItemAction"](this.currentItem);
        var sliders=[{
          url: require("@/assets/images/slidericon/mj.png"),
          checkedUrl: require("@/assets/images/slidericon/mjSelect.png"),
          name: "人脸门禁",
          id:0
        },
        {
          url: require("@/assets/images/slidericon/face.png"),
          checkedUrl: require("@/assets/images/slidericon/faceSelect.png"),
          name: "人脸抓拍",
          id:1
        },
        {
          url: require("@/assets/images/slidericon/car.png"),
          checkedUrl: require("@/assets/images/slidericon/carSelect.png"),
          name: "车辆抓拍",
          id:2
        },
        {
          url: require("@/assets/images/slidericon/wifi.png"),
          checkedUrl: require("@/assets/images/slidericon/wifiSelect.png"),
          name: "自助采集",
          id:3
        }]
    this.slider=[]
    for(var i in this.list){
      sliders.map(item=>{
        if(item.id==this.list[i].id){
          this.slider.push(item)
        }
      })
    }
    },
    //点击菜单
    handleItem(index) {
      if (index == 4) {
        // this.$message({
        //   type: "info",
        //   message: "功能开发中"
        // });
        return;
      }
      // if (index == 0) {
      //   if (this.currentItem == 0) {
      //     this.currentItem = -1;

      //     this.$nextTick(() => {
      //       this.removeMarker();
      //     });
      //   } else {
      //     this.currentItem = 0;

      //     this.addMapMarker();
      //   }

      //   return;
      // }
      // jkLayer && this.removeMarker();
      this.currentItem = index;
      this["GetSliderItemAction"](index);
    },
    removeMarker() {
      jkLayer.removeAllFeatures();
    },
    addMapMarker(type, lng, lat, icon, device) {
      let that = this;
      jkLayer = new OMAP.Layer.Vector("jkLayer", {
        renderers: ["SVG"],
        eventListeners: {
          // 图层事件
          featureclick(e) {
            // 点击事件;
            let item = e.feature;

            console.log(item);
            that.dialogVisible = true;
            that.dialogTitle = item.data.name;
            var conf1 = {
              videoid: "h5sVideo1",
              protocol: "http:", //http: or https:
              host: "192.168.15.232:5080", //localhost:8080
              rootpath: "/", // '/' or window.location.pathname
              token: "token" + item.data.url,
              hlsver: "v1", //v1 is for ts, v2 is for fmp4
              session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
            };

            that.$nextTick(() => {
              var v1;
              if (that.token == "") {
                //init
                that.token = item.data.url;
                that.v1 = H5sPlayerCreate(conf1);
                that.v1.connect();
              }
              //切换摄像头
              let p = new Promise((res, rej) => {
                if (that.token != item.data.url) {
                  if (that.v1 != null) {
                    that.v1.disconnect();
                    that.v1 = null;
                    document.getElementById("h5sVideo1").remove();
                    document.getElementById("h5videobox").innerHTML =
                      '<video style="height:800px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
                    res();
                  }
                }
              });
              p.then(res => {
                that.v1 = H5sPlayerCreate(conf1);
                that.v1.connect();
              });
            });
          },
          featureover: e => {
            // 移入事件
          },
          featureout: function(e) {
            // 移出事件
          }
        }
      });

      var features = this.drawPointsByVideo(jkData);
      console.log(features);
      jkLayer.addFeatures(features);
      window.newMap.addLayer(jkLayer);
    },
    drawPointsByVideo(items) {
      var features = [];
      var x;
      var y;
      for (var i = 0; i < items.length; i++) {
        var o = JSON.parse(JSON.stringify(items[i]));
        console.log("ooooo", o);

        var img = require("../../assets/images/sxt.png");

        var style = {
          externalGraphic: img,
          graphic: true,
          graphicWidth: 29,
          graphicHeight: 38,
          graphicOpacity: 1,
          label: "",
          fontSize: "15px",
          fontFamily: "微软雅黑",
          fontWeight: "bold",
          labelOutLineColor: "white",
          fontColor: "blue",
          cursor: "pointer",
          name: o[1]
        };
        console.log("xxx", o[0]);
        let oo = {};
        oo.id = o[0];
        oo.name = o[1];
        oo.x = o[2];
        oo.y = o[3];
        oo.lon = o[2];
        oo.lat = o[3];
        oo.url = o[4];
        oo.num = i;
        var feature = this.getPointFeature(oo, style);
        features.push(feature);
        x = o[2];
        y = o[3];
      }
      return features;
    },
    getPointFeature(item, style) {
      console.log("item", item);
      var object = new OMAP.Geometry.Point(item.lon, item.lat);
      var typestr = "Point_" + item.id;
      var feature = new OMAP.Feature.Vector(object, item, style);
      feature.attributes.pid = typestr;
      return feature;
    }
  }
};
</script>

<style lang="less" scoped>
.x-slider {
  position: absolute;
  top: 15%;
  z-index: 1;
  .silder-item {
    transition: height 0.3s ease-in-out;
    height: 0;
    overflow: hidden;
    &.item-h {
      height: 19.2rem;
    }
  }
}
</style>
